<template>
  <div>
    <!-- [title为标题] [xs为 1就是返回按钮 为空是不显示(xs为1,fh就必须为1)] 
    [icon 空为没有 有就显示图标 el-icon-s-operation][bgcolor 1为白色背景 空为透明]
    [fh 有返回,fh=1;有图标,fh=2]-->
    
    <!-- :school="" 向head页面传值  -->
    <Head :school="imgdata" title="上传照片" xs="" fh="2" icon="el-icon-s-operation" bgcolor="" />
    <div class="content">
      <div class="cont_top">
        <div class="cont_top_xj">
          <span class="el-icon-camera-solid"></span>
        </div>
        <p>拍摄照片</p>
      </div>
      <p>或者从你图库里选择一张</p>
      <div class="cont_body">
        <div class="box">
          <ul>
            <li v-for="value in dataA" :key="value.id">
              <div @click="change($event,value.id)">
                <img :src="value.imgurl" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Foot num="3" />
  </div>
</template>
<script>
import Head from "../../components/Fb_body/Head.vue";
import Foot from "../../components/Foot.vue";
export default {
  name: "Fb",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      dataA: [],
      sta: 0,
      imgdata:[],
    };
  },
  methods: {
    change($event,value) {
      if ($event.currentTarget.className == "check") {
        $event.currentTarget.className = "";
        //indexOf 查询某个值
        let index = this.imgdata.indexOf(value);
        this.imgdata.splice(index,1);
      } else {
        $event.currentTarget.className = "check";
        this.imgdata.push(value);
        }
    },
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAllimg",
    }).then((res) => {
      this.dataA = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 775px;
  background-color: #f1f1f1;
  padding: 5px;
  > .cont_top {
    height: 300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.534);
    > .cont_top_xj {
      width: 150px;
      height: 150px;
      border: 2px solid rgba(128, 128, 128, 0.596);
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      > span {
        line-height: 150px;
        font-size: 55px;
        color: rgba(128, 128, 128, 0.856);
      }
    }
    > p {
      margin-top: 15px;
      font-size: 22px;
      color: gray;
      font-weight: bold;
    }
  }
  > p {
    font-size: 21px;
    margin-top: 12px;
    margin-bottom: 12px;
    color: gray;
  }
  > .cont_body {
    overflow: scroll;
    > .box {
      height: 420px;
      > ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 5px;
        > li {
          // margin-left: 20px;
          margin-bottom: 15px;
          > div {
            width: 110px;
            height: 110px;
            position: relative;
            > img {
              width: 110px;
              height: 110px;
            }
            > .el-icon-check {
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
      }
    }
  }
}
.check {
  // box-shadow: 0px 0px 5px 3px #25397cad;
  outline: 5px solid #253a7c;
  // box-sizing: border-box;
  > .el-icon-check {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #253a7c;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    color: white;
  }
}
</style>